MVVM overview

Transcript

1. MVVM overview @akifumi
2. 自己紹介 • 名前 ◦ 深谷 哲史（ふかや あきふみ） • 会社 ◦ 株式会社メルペイ（2018/06 ~ ） • 職種 ◦ ソフトウェアエンジニア（ iOS） • アカウント ◦ Twitter: @akifumifukaya ◦ Facebook: Akifumi Fukaya ◦ Github: akifumi 2
3. About MVVM • ソフトウェアアーキテクチャパターンのひとつ • Model, View, ViewModel に分ける ◦ Model ▪ データの管理 ▪ ドメインモデル ▪ ビジネスロジック ◦ View ▪ ユーザーインターフェイス ◦ ViewModel ▪ View と Model をつなぐ • merpay-ios-sdk では、MVVMを採用している ◦ ※ merpay-ios-sdk は、メルカリ内のメルペイの機能を提供しているもの
4. MVVM in iOS ViewController ViewModel Model data inputs outputs
5. ListViewModelを考えてみる
6. MVVM in iOS ListViewController ListViewModel Item data inputs outputs
7. Interface of ViewModel • ViewModelInputs ◦ View → ViewModel への入力を定義 • ViewModelOutputs ◦ ViewModel → View への出力を定義 • ViewModelType ◦ ViewModelのインターフェイス定義
8. MVVM in iOS ListViewController ListViewModelInputs ListViewModelOutputs ListViewModel ListViewModelType
9. ListViewModelInputs protocol ListViewModelInputs { func viewDidLoad() func tableViewDidSelectRow(section: Int, row: Int) }
10. ListViewModelOutputs protocol ListViewModelOutputs: class { typealias Section = ListViewModel.Section typealias Alert = ListViewModel.Alert var sections: [Section] { get } var reloadData: (() -> Void)? { get set } var showAlert: ((Alert) -> Void)? { get set } }
11. ListViewModelType protocol ListViewModelType { var inputs: ListViewModelInputs { get } var outputs: ListViewModelOutputs { get } }
12. ListViewModelType protocol ListViewModelInputs { func viewDidLoad() func tableViewDidSelectRow(section: Int, row: Int) } protocol ListViewModelOutputs: class { typealias Section = ListViewModel.Section typealias Alert = ListViewModel.Alert var sections: [Section] { get } var reloadData: (() -> Void)? { get set } var showAlert: ((Alert) -> Void)? { get set } } protocol ListViewModelType { var inputs: ListViewModelInputs { get } var outputs: ListViewModelOutputs { get } }
13. ListViewModel final class ListViewModel: ListViewModelType, ListViewModelInputs, ListViewModelOutputs {}
14. ListViewModel final class ListViewModel: ListViewModelType, ListViewModelInputs, ListViewModelOutputs { enum Section { case items([Item]) } struct Alert { let title: String let message: String let completion: (() -> Void)? } }
15. ListViewModel final class ListViewModel: ListViewModelType, ListViewModelInputs, ListViewModelOutputs { … // MARK: - ListViewModelType var inputs: ListViewModelInputs { return self } var outputs: ListViewModelOutputs { return self } }
16. ListViewModel final class ListViewModel: ListViewModelType, ListViewModelInputs, ListViewModelOutputs { … // MARK: - ListViewModelInputs func viewDidLoad() { reload() } func tableViewDidSelectRow(section: Int, row: Int) { // do-something } }
17. ListViewModel final class ListViewModel: ListViewModelType, ListViewModelInputs, ListViewModelOutputs { … // MARK: - ListViewModelOutputs private(set) var sections: [Section] = [] { didSet { reloadData?() } } var reloadData: (() -> Void)? var showAlert: ((Alert) -> Void)? }
18. ListViewController final class ListViewController: UIViewController { private var viewModel: ListViewModelType init(viewModel: ListViewModelType = ListViewModel()) { self.viewModel = viewModel super.init(nibName: nil, bundle: Bundle.main) } @available(*, unavailable) required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }
19. ListViewController final class ListViewController: UIViewController { typealias Alert = ListViewModelOutputs.Alert @IBOutlet private var tableView: UITableView! … override func viewDidLoad() { super.viewDidLoad() bind() viewModel.inputs.viewDidLoad() } private func bind() { viewModel.outputs.reloadData = { [weak self] in self?.tableView.reloadData() } viewModel.outputs.showAlert = { [weak self] alert in self?.showAlert(with: alert) } } private func showAlert(with alert: Alert) { UIAlertController.ok(title: alert.title, message: alert.message, in: self, completion: { _ in alert.completion?() }) } }
20. Unit tests • merpay-ios-sdk では、ほぼ全てのViewControllerの実装でMVVMアーキテクチャ を採用している • ViewModelに対して、ユニットテストを書くようにして品質を向上している
21. ListViewModelTests import XCTest @testable import ViewModelSample class ListViewModelTests: XCTestCase { private var viewModel: ListViewModelType! override func setUp() { super.setUp() viewModel = ListViewModel() } override func tearDown() { viewModel = nil super.tearDown() } }
22. ListViewModelTests class ListViewModelTests: XCTestCase { private var viewModel: ListViewModelType! … func testSections() { viewModel.inputs.viewDidLoad() XCTAssertEqual(viewModel.outputs.sections.count, 1) guard case let .items(rows) = viewModel.outputs.sections[0] else { return XCTFail() } XCTAssertEqual(rows.count, 10) XCTAssertEqual(rows[0].name, "Item 0") } }
23. MVVM Advantages • 可読性: View, Model, ViewModel に分割する ◦ 役割を明確に分けることができる ◦ クラス単位のコード量が減る ◦ コードの見通してが良くなる • テスタビリティ: コードの品質が向上する ◦ ViewModelにロジックを分割し、ロジックに対してテストを書くこと容易になる ◦ • 拡張性 ◦ ViewModelを分割し、ViewModelType/ViewModelInputs/ViewModelOutputsとインターフェイスを 設けていることにより、 ViewModelの入れ替えが容易
24. Code coverage of merpay-ios-sdk
25. Thank you for your attention.